<template>
  <div>
    <div style="float:left">
      <!-- <div
        class="filesContent"
        v-if="$route.query.up"
      >
        <input
          @change="dataImport"
          class="filesInput"
          multiple
          name="file"
          ref="filesInput"
          type="file"
          webkitdirectory
        >
        <el-button
          class="filesBtn"
          size="mini"
        >
          选择目录上传
        </el-button>
      </div> -->
      <!-- :disabled="!idx.id" -->
      <el-button
        :disabled="$route.path !== '/videoDetail'"
        @click="goPage('输出报表')"
        size="mini"
      >
        输出报表
      </el-button>
      <!-- <el-button
        :disabled="$route.path !== '/videoDetail'"
        @click="goPage('公里定位')"
        size="mini"
      >
        公里定位
      </el-button> -->
      <el-button
        :disabled="$route.path !== '/videoDetail'"
        @click="goPage('时间定位')"
        size="mini"
      >
        时间定位
      </el-button>
      <el-button
        :disabled="$route.path !== '/videoDetail'"
        @click="goPage('视频详情')"
        size="mini"
      >
        视频详情
      </el-button>
      <el-button
        :disabled="$route.path !== '/videoDetail'"
        @click="goPage('全程记录')"
        size="mini"
      >
        {{ openWholeRecord ? '关闭' : '打开' }}全程记录
      </el-button>
      <!-- <el-button
        @click="goPage('处理列表')"
        size="mini"
      >
        处理列表
      </el-button> -->
      <!-- <el-button
        :disabled="!$route.query.lkj && !idx.recordId"
        @click="goPage('报警记录')"
        size="mini"
      >
        报警记录
      </el-button> -->
    </div>
    <div style="float:right">
      <!-- <el-button
        @click="goPage('LKJ处理')"
        size="mini"
      >
        LKJ处理
      </el-button> -->
      <el-button
        @click="goPage('播放界面')"
        size="mini"
      >
        播放界面
      </el-button>
      <el-button
        @click="goPage('查询界面')"
        size="mini"
      >
        查询界面
      </el-button>
    </div>
    <DialogForm
      :dialog-form-visible="dialogVisible"
      :dialog-title="dialogTitle"
      :foot-show="dialogTitle === '公里定位' || dialogTitle === '时间定位'"
      @dialog-cancel="dialogCancel"
      @dialog-confirm="dialogConfirm"
    >
      <template v-if="dialogTitle === '公里定位' || dialogTitle === '时间定位'">
        <el-form
          :model="form"
          :rules="rules"
          @submit.native.prevent
          label-width="120px"
          ref="form"
          style="width:500px;margin: auto;"
        >
          <el-form-item
            label="公里标:"
            prop="km"
            v-if="dialogTitle === '公里定位'"
          >
            <el-input
              placeholder="请输入公里标"
              size="small"
              type="number"
              v-model.number="form.km"
            />
          </el-form-item>
          <el-form-item
            label="开始播放时间:"
            prop="suffixDate"
            size="small"
            v-if="dialogTitle === '时间定位'"
          >
            <el-time-picker
              placeholder="开始播放时间"
              :default-value="form.suffixDate"
              v-model="form.suffixDate"
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="dialogTitle === '视频详情'">
        <VideoInfoTable
          :form="forms"
        />
      </template>
      <!-- <template v-if="dialogTitle === '报警记录'">
        <AlarmInfoTable
          :data="idx"
          :list="lkjAlarms.records"
          v-loading="lkjAlarms.loading"
          element-loading-text="拼命加载中"
        />
      </template> -->
      <template v-if="dialogTitle === '输出报表'">
        <AnalysisLogTable
          @search="analysisSearch"
          @export="analysisExport"
        />
      </template>
      <!-- <template v-if="dialogTitle === 'LKJ处理'">
        <LkjHandle
          @search="getLkjHandle"
          :list="lkjHandle.records"
          v-loading="lkjHandle.loading"
          element-loading-text="拼命加载中"
        />
      </template> -->
    </DialogForm>
  </div>
</template>
<script>
// import { Component, Vue, Watch, Mixins } from 'vue-property-decorator'
import { Form, Table } from 'element-ui'
// import { Analysis } from '@/views/analysis/mixins'
import DialogForm from './DialogForm.vue'
import VideoInfoTable from './VideoInfoTable.vue'
// import AlarmInfoTable from './AlarmInfoTable.vue'
import AnalysisLogTable from './AnalysisLogTable.vue'
// import LkjHandle from './LkjHandle.vue'
import convert from '@/utils/convert'
import axios from 'axios'
// import { baseURL, prefix } from '@/utils/request'
// import { downFile } from '@/utils'
// import { Tags } from '@/views/mixins'
// import { Upload } from '@/store/modules/upload/mixins'
export default {
    components: {
    DialogForm,
    VideoInfoTable,
    // AlarmInfoTable,
    AnalysisLogTable,
    // LkjHandle
  },
  props:{
    forms: {
      type: Object,
      default: {}
    },
    openWholeRecord:{
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      baseUrl: 'http://localhost',
      dialogVisible: false,
      loading: false,
      dialogTitle: '',
      form: {
        suffixDate: null,
        km: null
      },
      rules: {
        km: [{ required: true, message: '请输入公里标', trigger: 'blur' }],
        suffixDate: [{ required: true, message: '请输入开始播放时间', trigger: 'blur' }]
      },
      videoPlayStartTime: '',
      isShow: false
    }
  },
  computed: {
    meta:{
      get(){
        return this.$route.meta
      }
    },
    idx:{
      get(){
        return this.meta.idx || {}
      }
    }
  },
  methods: {
    dataImport(){
      const files = [...e.target.files]
      const formData = new FormData()
      files.forEach((file, index) => {
        formData.append('file', file)
      })
      const res = this.uploadFiles(formData)
      if (res.data) {
        this.clearFile()
      }
    },
    clearFile(){
        const file = this.$refs.filesInput
        file.value = ''
    },
    goPage(item) {
    this.dialogTitle = item
    switch (item) {
      case '公里定位':
        this.dialogVisible = true
        this.form.km = this.currentIdx.kilometre
        break
      case '时间定位':
        this.dialogVisible = true
        // this.form.suffixDate = +(sessionStorage.getItem('playedTime') || 0)
        break
      case '全程记录':
        this.$emit('allLog',this.openWholeRecord)
        break
      case '视频详情':
        this.dialogVisible = true
        break
      case '报警记录':
        this.dialogVisible = true
        if (this.idx.recordId) {
          this.lkjAlarms.query({
            id: this.idx.recordId
          })
        }
        break
      case '输出报表':
        this.dialogVisible = true
        break
      case 'LKJ处理':
        this.dialogVisible = true
        break
      case '查询界面':
        this.$router.push({
          path: '/vedioanalysis',
          query: {
            id: '85B163485852F78F9BECA46A1E394D76'
          }
        })
        break
      case '播放界面':
        this.$router.push({
          path: '/videoDetail',
          query: {
            id: '378',
            recordId: '85B163485852F78F9BECA46A1E394D76'
          }
        })
        break
      case '处理列表':
        this.$router.push({
          path: '/handleList',
          query: {
            id: '378',
            recordId: '85B163485852F78F9BECA46A1E394D76'
          }
        })
        break
      default:
        break
    }
  },
  // 弹框确认
  dialogConfirm() {
    (this.$refs.form).validate((valid) => {
      if (valid) {
        this.dialogVisible = false
        switch (this.dialogTitle) {
          case '公里定位':
            this.queryIndexByKilometre(this.form.km).then((time) => {
              this.$emit('changeVideoStartTime', convert.dateFormat(new Date(time), 'HH:mm:ss'))
            })
            break
          case '时间定位':
            this.videoPlayStartTime = this.form.suffixDate
            this.$emit('changeVideoStartTime', this.form.suffixDate)
            break
          case '全程记录':
            break
          case '查询界面':
            break
          case '播放界面':
            break
          case '处理列表':
            break
          case '返回首页':
            break
          default:
            break
        }
      }
    })
  },
  // 关闭弹框
  dialogCancel() {
    if (this.$refs.form) {
      this.$nextTick(() => {
        (this.$refs.form).resetFields()
      })
    }
    this.dialogVisible = false
  },
  getAnalysisForm(form) {
    const params = {
      createBy: form.createBy,
      recordId: this.idx.recordId
    }
    if (form.time) {
      Object.assign(params, {
        start: form.time[0] || '',
        end: form.time[1] || ''
      })
    }
    return params
  },
  analysisSearch(form) {
    // this.idxReports.query(this.getAnalysisForm(form))
  },
  analysisExport(form) {
    // const params = this.getAnalysisForm(form)
    // const keys = Object.keys(params)
    // const url = keys.reduce((result, key) => {
    //   const val = params[key]
    //   if (val) {
    //     return `${result}${key}=${val}&`
    //   }
    //   return result
    // }, '')
    // const requestUrl = `${baseURL}${prefix.api}/idx/analysis/export?${url}`
    // downFile(requestUrl)
  },
  getLkjHandle(form) {
    this.lkjHandle.query(form)
  }
  }
}
</script>
<style scoped>
.wraper {
  margin: 0px auto;
  height: 500px;
  overflow: hidden;
}
.filesContent {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
  .filesBtn {
    position: relative;
  }
  .filesInput {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    width: 103px;
    height: 100%;
    cursor: pointer;
    opacity: 0;
  }
</style>
